<template>
  <div class="page">
    <operate ref="operate">
      <div class="operate-btn">
        <navigator url="/pages/journal/edit?jid=-1"
                   navigate>
          <text class="btn cuIcon-roundadd text-green"></text>
        </navigator>
        <text>添加日记</text>
      </div>
    </operate>
    <tip ref="tip"
         @emitEvent="emitEvent"
         :tipContent="tipContent"></tip>
    <div v-for="(item,index) in journals"
         :key="index"
         class="journals">
      <fui-card :title="item.Title"
                :tag="item.Tag"
                @tap="read(item.Jid)"
                @longpress="isShowBtn(index)">
        <view class="fui-card__content">{{item.Content}}</view>
      </fui-card>
      <view class="checkbox"
            v-show="showCheck">
        <fui-checkbox :value="index"
                      :checked="item.Checked"></fui-checkbox>
        <div class="box"
             @tap="select(index)"></div>
      </view>
    </div>

    <div class="select"
         v-if="showCheck">
      <div class="operate-btn"
           @tap="selectAll($event)"
           :data-option="allSelect">
        <text class="btn cuIcon-roundcheckfill text-blue"></text>
        <text>全选</text>
      </div>
      <div class="operate-btn"
           @tap="cancel()">
        <text class="btn close cuIcon-roundleftfill-copy"></text>
        <text>取消</text>
      </div>
      <div class="operate-btn"
           @tap="tip()">
        <text class="btn cuIcon-roundclosefill text-red"></text>
        <text>删除</text>
      </div>
    </div>
  </div>
</template>

<script>
import operate from '@/component/operate.vue'
import tip from '@/component/tip.vue'
import { confirm } from "@/utils/function.js"
import { r_GetContentById, j_DelContent } from "@/utils/request.js"
export default {
  components: {
    operate,
    tip
  },
  data () {
    return {
      rid: -1,
      jid: -1,
      journals: [],
      showCheck: false,
      allSelect: true,
      tipContent: '确定要删除吗',
    }
  },
  methods: {
    getContent: function (id) {
      this.journals = uni.getStorageSync('recordContent-' + id.toString())
      this.journals = this.journals != null ? this.journals : []
      if (this.journals.length == 0) {
        let userId = uni.getStorageSync('userId')
        let data = { "rid": id.toString(), "user_id": userId }
        r_GetContentById(data).then(res => {
          console.log(res);
          this.journals = res.data.data
        })
      }
    },
    initJournals: function () {
      for (let i = 0; i < this.journals.length; i++) {
        this.journals[i]["Checked"] = false
      }
    },
    select: function (i) {
      let that = this
      that.journals[i].Checked = !that.journals[i].Checked
      this.$set(this.journals, i, that.journals[i])
    },
    selectAll: function (e) {
      let option = e.currentTarget.dataset.option
      this.allSelect = !this.allSelect
      for (let i = 0; i < this.journals.length; i++) {
        let that = this
        that.journals[i].Checked = option
        this.$set(this.journals, i, that.journals[i])
      }
    },
    cancel: function () {
      this.showCheck = false
      this.selectAll
    },
    read: function (jid) {
      uni.navigateTo({
        url: './edit?jid=' + jid
      });
    },
    isShowBtn: function (index) {
      this.showCheck = true
      this.journals[index]["Checked"] = true
    },
    tip: function () {
      this.$refs.tip.tip()
    },
    emitEvent: function () {
      this.delJournal()
    },
    delJournal: function () {
      let delStr = ""
      for (let i = 0; i < this.journals.length; i++) {
        if (this.journals[i]["Checked"]) {
          delStr += this.journals[i]["Jid"].toString() + ","
        }
      }
      delStr = delStr.substring(0, delStr.length - 1)
      let data = { "jids": delStr }
      j_DelContent(data).then(res => {
        console.log(res);
        confirm(1, "删除成功", 2, "/pages/journal/index?rid=" + this.rid.toString())
      })
    }
  },
  onLoad (option) {
    this.rid = option.rid
    this.getContent(this.rid)
    setTimeout(() => {
      this.initJournals()
    }, 1500);
  },
  onHide: function () {
    this.$refs.operate.closePopup()
  },
}
</script>

<style lang="scss" scoped>
.journals {
  padding: 0.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

fui-card {
  width: 100%;
}
.fui-card__content {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0.9375rem;
}

.checkbox {
  padding: 5px;
  position: relative;
  .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.select {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 70%;
  width: 90%;
  .operate-btn {
    .btn {
      font-size: 60px;
    }
    .close {
      transform: rotate(-90deg);
    }
  }
}
</style>